<template>
	<view class="uni_box">
		<navbar :title='title'>
		</navbar>
		<view class="content">
			<!-- <view class="zhangnav"> -->
				<view class="listitem">
					<u-input v-model="email" type="text" :placeholder='qshuru' />
				</view>
				<view class="listitem">
					<!-- <input class="iteminput" type="number" v-model="code" placeholder="请输入验证码"> -->
					<u-input class="iteminput" v-model="code" type="number" :placeholder='youyan' />
					<text class="fayan" v-if="isTimer">{{time}}s</text>
					<text class="fayan" v-else @click="lockSheet">{{$t('common.fayan')}}</text>
				</view>
				<view class="listitem">
					<u-input class="iteminput" v-model="password" :type="type" :border="border" :password-icon="passwordIcon" :placeholder='mione' />
					<!-- <input class="iteminput" :type="iseyes ? type_number : type_password" v-model="password" placeholder="请输入密码"> -->
					<!-- <view v-if="iseyes" class="yanright" @click="eyesClick(1)">
						<image src="@/static/h/yaning.png" class="yan"></image>
					</view>
					<view v-if="!iseyes" class="yanright" @click="eyesClick(1)">
						<image src="@/static/h/yan.png" class="yan"></image>
					</view> -->
				</view>
				<view class="listitem">
					<u-input class="iteminput" v-model="confirm_password" :type="type" :border="border" :password-icon="passwordIcon" :placeholder='mitwo' />
					<!-- <input class="iteminput" :type="iseyestwo ? type_number : type_password" v-model="confirm_password" placeholder="请再次输入密码"> -->
					<!-- <view v-if="iseyestwo" class="yanright" @click="eyesClick(2)">
						<image src="@/static/h/yaning.png" class="yan"></image>
					</view>
					<view v-if="!iseyestwo" class="yanright" @click="eyesClick(2)">
						<image src="@/static/h/yan.png" class="yan"></image>
					</view> -->
				</view>
				<view class="bot">
					<view class="botbtn">
						<!-- <image src="@/static/h/btnbg.png" mode="" class="btnbg"></image> -->
						<view class="btnbgview" @click="findPassword">
							{{$t('common.queren')}}
						</view>
					</view>
				</view>
			<!-- </view> -->
		</view>
		<!-- <yidunCaptcha ref="captcha" :isSense="false" @verify="handleCaptcha"></yidunCaptcha> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// title: "忘记密码",
				active: true,
				phone: "",
				code: "",
				password: "",
				confirm_password: "",
				
				pay_password: "",
				payconfirm_password: "",
				
				invitation_code: "",
				
				timer: null,
				time: 60,
				isTimer: false,
				
				checked: false,
				iseyes:false,
				iseyestwo:false,
				type_number: "number",
				type_password: "password",
				email:'',
				type: 'password',
				passwordIcon: true,
				border: false,
			}
		},
		computed: {
			// 正确用法
			title(){
				return this.$t('i.mizhao')
			},
			qshuru(){
				return this.$t('i.yx')
			},
			qingmi(){
				return this.$t('i.mi')
			},
			youyan(){
				return this.$t('i.youyan')
			},
			mione(){
				return this.$t('i.mione')
			},
			mitwo(){
				return this.$t('i.mitwo')
			}
		},
		onLoad: function(option) {
			// if (option.type == 1) {
			// 	this.title = "忘记密码";
			// 	this.phone = this.$store.state.info.phone;
			// 	this.disabled = true;
			// } else {
			// 	this.title = "找回密码";
			// 	this.phone = "";
			// }
		},
		methods: {
			async lockSheet() {
				let email = this.email;
				if (!email) {
					this.$refs.uToast.show({
						title:this.$t('i.shuphone'),
						type: "error"
					})
					return
				};
				// this.$refs.captcha.verify();
				this.isTimer = true;
				this.timer = setInterval(() => {
					this.time--
					if (this.time < 0) {
						this.isTimer = false;
						this.time = 60;
						clearInterval(this.timer);
					};
				}, 1000);
				let res = await this.$u.api.send({
					email: this.email,
					scene: "find_password"
				});
			},
			async handleCaptcha(validate) {
				this.isTimer = true;
				this.timer = setInterval(() => {
					this.time--
					if (this.time < 0) {
						this.isTimer = false;
						this.time = 60;
						clearInterval(this.timer);
					};
				}, 1000);
				let res = await this.$u.api.smsSend({
					phone: this.phone,
					scene: "find_password",
					authenticate:validate.authenticate,
					token:validate.token
				});
			},
			router(url) {
				uni.navigateTo({
					url
				})
			},
			eyesClick(e){
				if(e == 1){
					this.iseyes = !this.iseyes
				}else if(e ==2){
					this.iseyestwo = !this.iseyestwo
				}
			},
			async findPassword() {
				if (!this.email) {
					this.$u.toast(this.$t('i.yx'));
					return false;
				}
				if (!this.code) {
					this.$u.toast(this.$t('i.youyan'));
					return false;
				}
				if (this.password != this.confirm_password) {
					this.$refs.uToast.show({
						title: this.$t('i.nyz'),
						type: "error"
					})
					return false;
				};
				// if (this.password.length < 6 || this.confirm_password.length < 6) {
				// 	this.$refs.uToast.show({
				// 		title: "密码长度不够",
				// 		type: "error"
				// 	})
				// 	return false;
				// }
				await this.$u.api.findPassword({
					email: this.email,
					code: this.code,
					password: this.password,
					confirm_password: this.confirm_password
				});
				this.$u.toast(this.$t('i.micheng'));
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}, 1000);
			},
			routerTo(url) {
				uni.redirectTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
page{
	background-color: #fff;
}
.content {
padding: 30rpx 35rpx 0;
box-sizing: border-box;
.contenthead{
	display: flex;
	flex-direction: column;
	align-items: center;
	.newlogo{
		width: 320rpx;
		height: 320rpx;
	}
}
	.zhangnavitem{
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.xian{
			width: 100%;
			height: 4rpx;
			background: #999999;
		}
		.tit{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			display: inline-block;
			margin-bottom: 8rpx;
		}
		
	}
	.active .xian{
		background: #73FAB5;
	}
	.active .tit{
		color: #73FAB5;
		font-weight: bold;
	}
}
.listitem{
	width: 100%;
	height: 92rpx;
	border: 1rpx solid #C8C9D1;
	border-radius: 10rpx;
	padding: 0 35rpx;
	margin-bottom: 56rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	.qu{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333;
		margin-right: 20rpx;
	}
	.iteminput{
		font-size: 28rpx;
		color: #fff;
		width: 70%;
		height: 70%;
		background: none;
		border: none;
	}
	.fayan{
		margin-left: auto;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #8A1596;
	}
	.yanright{
		margin-left: auto;
		display: flex;
		align-items: center;
	}
	.iteminput:active{
		border: none;
	}
	.iteminput:focus {
	    outline:none;
	    border: none;
	}
	.yan{
		// margin-left: auto;
		width: 44rpx;
		height: 44rpx;
	}
}
.zhuce{
	display: flex;
	flex-direction: row;
	
	.zhuceitem{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999;
	}
	.zhuces{
		color: #73FAB5;
	}
	.wangji{
		margin-left: auto;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
}
// 按钮样式开始
.bot{
	margin-top: 100rpx;
	.botbtn{
		width: 100%;
		height: 88rpx;
		position: relative;
		background: #8A1596;
	    border-radius: 10rpx;
		.btnbg{
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 0;
		}
		.btnbgview{
			position: relative;
			z-index: 1;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #fff;
		}
	}
}
// 按钮样式结束
.item_desc{
	margin-top: 36rpx;
	display: flex;
	align-items: center;
	.desctext{
		display: flex;
		align-items: center;
	}
}
.yiyou{
	display: block;
	text-align: right;
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #999;
	.yiyoutext{
		color: #73FAB5;
		font-weight: bold;
	}
}
</style>
